<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>管理平台</title>
    <jsp:include page="../../../include/header.jsp"></jsp:include>
        <style type="text/css">
			table td{
			text-align: center;
			white-space: normal; 
			overflow: hidden;
		    text-overflow: ellipsis;
			}
		 	table th{
			text-align: center;
		 	}
		 	  /*排序 */
			.querySort{
			   position:relative;
			}
			.down{
			   position: absolute;
			   top:12px;
			   display:inline-block;
			   width:10px;
			   height:12px;
			   margin-left: 8px;
			   background: url("${BASE_PATH}/static/images/sprite-arrow.png") 0 61px;
			}
		    .sort .querySort:NTH-OF-TYPE(2) .down{
			    top:-3px;
			    transform: rotateX(180deg);
			}
			.querySort:hover .down{
			   background: url("${BASE_PATH}/static/images/sprite-arrow.png") 0 21px;
			}
			
		  .downSort{
			    position: absolute;
			    top: 3px;
			    left: 3px;
			    width: 18px;
			    height: 24px;
			    opacity: 0;
			    cursor:pointer;
			}
		    .upSort {
			    position: absolute;
			    top: -15px;
			    left: 3px;
			    width: 18px;
			    height: 24px;
			    opacity: 0; 
			    cursor:pointer;
			}
		</style>
</head>
<body>
<div id="wrapper" class="row">

	
			<%-- <div class="col-lg-12">
				<h1 class="page-header">商品统计</h1> --%>
			<div class="col-xs-12 col-md-12 col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">团购商品统计信息</div>
					<div class="panel-body hint">
						<div class="col-xs-2 col-md-2 col-lg-2">团购商品总数 : <span class="label label-info" id="goodsgb"></span>${gbnumber} </div>
						<div class="col-xs-2 col-md-2 col-lg-2">录入商品总数 : <span class="label label-info" id="goodsCount"></span>${tolnumber} </div>
						<div class="col-xs-2 col-md-2 col-lg-2">上架商品总数: <span class="label label-info" id="chart1State3"></span>${sjnumber }</div>
						<div class="col-xs-2 col-md-2 col-lg-2">上架审核中: <span class="label label-info" id="chart1State1"></span>${sjshnumber}</div>
				    	<div class="col-xs-2 col-md-2 col-lg-2">下架商品总数 : <span class="label label-info" id="chart1State2"></span>${xjnumber} </div>
						<%-- <div class="col-xs-2 col-md-2 col-lg-2">下架审核任务 :<span class="label label-info" id="chart1State4"></span>${xjshnumber }</div> --%>
					</div>
				</div>
			</div>

	
			<!-- 搜索框 -->
		<div  id="seReset"  class="title-top col-lg-12">
				 <label class="search-label">商品编号:</label><input type="text" id="sGoodId" class="form-control search-input width120" maxlength="21">
				<label class="search-label">商品名称：</label><input type="text"
				id="sGoodName" value="" class="form-control search-input width200"
				>
				<%-- <label class="search-label">选择商家:</label>
				<select id="sSellerId" class="selectpicker pull-left p-l-5" data-width="10%" data-url="${BASE_PATH}/api/sellerAll" data-isfirst="true" data-next="#sStoreId" data-key="sellerId:sellerName"></select> 
				<label class="search-label">选择分公司:</label>
				<select id="sStoreId" class="selectpicker pull-left p-l-5" data-width="10%" data-url="${BASE_PATH}/api/store/{value}"  data-key="storeid:title"></select>--%>
				<c:if test="${RoleId==1||RoleId==2}">
				 <label class="search-label">选择分公司:</label>
			<%-- <select id="sStoreId" class="selectpicker pull-left p-l-5" data-width="10%" data-url="${BASE_PATH}/api/Orderstore/${sellerId}" data-isfirst="true"  data-key="storeid:title"></select>  --%>
				   <select id=sStoreId class="selectpicker pull-left p-l-5" multiple="multiple" data-width="120">
						<c:forEach items="${list }" var="Store">
							<option value="${Store.storeid }">${Store.title }</option>
						</c:forEach>
					</select>
				</c:if>
				<label class="search-label">商品状态:</label>
				<div class="search-input">
					<select id="sState" class="selectpicker" data-width="100">
						<option value="0">全部</option>
						<option value="1">上架审核中</option>
						<option value="2">已上架</option>
						<option value="3">已下架</option>
						<option value="4">驳回</option>
					</select>
				</div>
					
				<!-- <label class="search-label">支付方式：</label>
				<div class="search-input">
					<select id="sType" class="selectpicker" data-width="150">
						<option value="0">全部</option>
						<option value="1">纯货币支付</option>
						<option value="2">纯积分支付</option>
						<option value="3">积分＋货币支付</option>
					</select>
				</div> -->
				
					<label class="search-label">上架时间:</label>
					<input type="text" id="sBeginDate" autocomplete="off" value="" class="form-control search-input width100 datetimepicker" data-format="yyyy-mm-dd" >
					<label class="search-label">至</label>
						<input type="text" id="sEndDate" autocomplete="off" value="" class="form-control search-input width100 datetimepicker" data-format="yyyy-mm-dd" >
					<div class="fl-width530">
						<label class="search-label">下架时间:</label>
							<input type="text" id="xBeginDate" autocomplete="off" value="" class="form-control search-input width100 datetimepicker" data-format="yyyy-mm-dd" >
						<label class="search-label">至</label>
							<input type="text" id="xEndDate" autocomplete="off" value="" class="form-control search-input width100 datetimepicker" data-format="yyyy-mm-dd" >
						<button class="btn btn-success search-btn" onclick="query();">确定</button>
						<button class="btn btn-success search-btn" onclick="reset();">重置</button>
						
					</div>
					<c:if test="${session.userpopedom.busGoodsStoreDoExcel==1}">
					  <button onclick="doExcel();" class="btn btn-success pull-right">导出</button>
					</c:if>
			
				
			</div>
	
			<div class="col-lg-12 title-top">
				<div class="col-lg-12">
						<div class="text-muted single-line-text pull-left">共 <font color="#428bca" id="dataCount">0</font> 条记录</div>
				
				    <div style="float:right;margin-right: 30px;">
						<div class="text-muted single-line-text pull-right">订单量: 日&nbsp;&nbsp;<input type="radio" class="radioItem" id="state1" name="state" value="1" />
						 	&nbsp;&nbsp;周&nbsp;&nbsp;<input type="radio" class="radioItem" id="state2" name="state" value="2" />
						    &nbsp;&nbsp;月&nbsp;&nbsp;<input type="radio" class="radioItem" id="state3" name="state" value="3" /></div>
					</div>
				</div>
				<div class="table-responsive panel panel-default">
					<table id="dataTable" class="table table-hover table-bordered " style=" overflow:scroll;word-break:break-all; word-wrap:break-all;">
			            <thead>
			                <tr>	
			                   <th width="100px">商品</th>			                	
								<th width="90px" style="text-align: center">商品ID</th>
								<th width="200px" style="text-align: center">商品名称</th>
								<th width="150px" style="text-align: center">所属分公司</th>
								<th style="width: 100px;" >上架分公司数量</th>
								<th class="sort" style="width: 80px;" >订单量
									<a class="querySort">
										<i class="down"></i>
										<input type="radio" name="radioState" value="1" class="downSort" onclick="searchQuery(1)">
									</a>
									<a class="querySort">
										<i class="down"></i>
										<input type="radio" name="radioState" value="2" class="upSort" onclick="searchQuery(2)">
									</a>
								</th>
								<th class="sort" style="width: 100px;" >总销售额
       							    <a class="querySort">
	       							     <i class="down"></i>
	       							     <input type="radio" name="radioState" value="7" class="downSort" onclick="searchQuery(7)">
       							    </a>
       							    <a class="querySort">
								           <i class="down"></i>
								           <input type="radio" name="radioState" value="8" class="upSort" onclick="searchQuery(8)">
								    </a>
       							</th>
								<th class="sort" style="width: 80px;" >收藏量
									<a class="querySort">
									<i class="down"></i>
										<input type="radio" name="radioState" value="3" class="downSort" onclick="searchQuery(3)">
									</a>
									<a class="querySort">
										<i class="down"></i>
										<input type="radio" name="radioState" value="4" class="upSort" onclick="searchQuery(4)">
									</a>
								</th>
								<th class="sort" style="width:80px;" >浏览量
								     <a class="querySort">
								         <i class="down"></i>
								         <input type="radio" name="radioState" value="5" class="downSort" onclick="searchQuery(5)">
								     </a>
								     <a class="querySort">
								           <i class="down"></i>
								           <input type="radio" name="radioState" value="6" class="upSort" onclick="searchQuery(6)">
								      </a>
								</th> 
								<th width="80px" style="text-align: center">上架时间</th>
								<th width="80px" style="text-align: center">下架时间</th>
								<th width="60px" style="text-align: center">当前状态</th>
								<th width="100px" style="text-align: center">拓客状态</th>
								<th width="100px" style="text-align: center">操作</th>
			                </tr>
			            </thead>
			            <tbody id="dataList"></tbody>
			        </table>
				</div>
		      
		        	<div class="col-lg-12">
		        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
		        	</div>
		      
			</div>
	
	</div>

<jsp:include page="../../../include/javascripts.jsp"></jsp:include>
<!-- 异步加载下一页数据后，用模板渲染 -->
<script type="text/html" id="thumbTpl">
<a href="javascript:void(0)" onclick="Kit.photo('{{thumb}}')" class="center-block thumbnail thumbnail-none-margin width50"><img src="{{thumb}}"></a>
</script>
<script type="text/html" id="dataTpl">
	{{each list as item}}
		<tr id="item{{item.id}}" data-id="{{item.id}}">	
        	<td>
				<a href="javascript:void(0)" onclick="Kit.photo('${FTP_PATH}{{item.thumb}}')" class="center-block thumbnail thumbnail-none-margin width50">
					<img src="${FTP_PATH}{{item.thumb}}">
				</a>
			</td>	
			<td style="text-align: center">{{item.id}}</td>
	    	<td style="text-align: center">{{item.name}}</td>		
			<td style="text-align: center">{{item.title}}</td>
			<td >{{item.countStore}}</td>
			<td >{{item.countSell}}</td>
			<td >{{item.countPrice}}</td>	
			<td >{{item.countCon }}</td>
			<td >{{item.conNum}}</td>
			<td style="text-align: center">{{item.uptime}}</td>
			<td style="text-align: center">{{item.downtime}}</td>
			{{if item.pstate==1 }}
           	{{if item.state==1}}
					<td style="text-align: center">上架审核中</td>
				{{else if item.state==2}}
					<td style="text-align: center">上架</td>
				{{else if item.state==3}}
					<td style="text-align: center">下架</td>
            	{{else if item.state==4}}
					<td>被驳回</td>
			{{/if}}
			{{else if item.pstate==2}}
				<td style="text-align: center">售罄</td>
			{{else if item.pstate==3}}
				<td style="text-align: center">降权</td>
         
			{{/if}}
			<td style="text-align: center">
				{{if item.tState==1}}打开{{/if}}
				{{if !item.tState}}关闭{{/if}}
			</td>
			<td style="text-align: center">
				<a href="javascript:showGoods('{{item.id}}');"><span class="btn">详情</span></a>
				<a href="javascript:goodsOrdergb('{{item.id}}');"><span class="btn">订单统计</span></a>  
			</td>
		</tr>
	{{/each}}
</script>

  
<script type="text/javascript">
var dataPaginator;
 $(query);
function query(){
	var goodId=$("#sGoodId").val(),storeid = $("#sStoreId").val(),sType = $("#sType").val(),sGoodName = $("#sGoodName").val(),
	pstate = $("#sState").val(),pstate = $("#sState").val(),pstate = $("#sState").val(),pstate = $("#sState").val(),
	//是否团购
	
	//是否赠送优惠
	//多支付方式
	sBeginDate = $("#sBeginDate").val(), sEndDate = $("#sEndDate").val(), xBeginDate = $("#xBeginDate").val(), xEndDate = $("#xEndDate").val();
	 //alert(storeid);
	 var $selectedvalue = $("input[name='state']:checked").val();
		if($selectedvalue==undefined){
			$selectedvalue =0;
		}
	var storeid;
	if(storeid !=null && storeid !="" && storeid !=undefined){
		storeid=storeid.join("','");
	}
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/bus/goods/store/pagegb",
			{goodId:goodId,sType:sType,storeid:storeid,pstate:pstate,sBeginDate:sBeginDate,sGoodName:sGoodName,sEndDate:sEndDate,xBeginDate:xBeginDate,xEndDate:xEndDate,date:$selectedvalue,"pageSize":10},function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
} 

/**
 * 此排序与默认排序冲突故分成二方法
 */
function searchQuery(index){
	var goodId=$("#sGoodId").val();storeid = $("#sStoreId").val(),pstate = $("#sState").val(),sType = $("#sType").val(),
		sBeginDate = $("#sBeginDate").val(), sEndDate = $("#sEndDate").val(), xBeginDate = $("#xBeginDate").val(), xEndDate = $("#xEndDate").val();
	 //alert(storeid);
	 var $selectedvalue = $("input[name='state']:checked").val();
		if($selectedvalue==undefined){
			$selectedvalue =0;
		}
	var storeid;
	if(storeid !=null && storeid !="" && storeid !=undefined){
		storeid=storeid.join("','");
	}
	if(dataPaginator){ 
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/bus/goods/store/pageSortGb",{index:index,goodId:goodId,storeid:storeid,pstate:pstate,sType:sType,
		//是否团购
		//是否赠送优惠
		//多支付方式	
		sBeginDate:sBeginDate,sEndDate:sEndDate,xBeginDate:xBeginDate,xEndDate:xEndDate,date:$selectedvalue,"pageSize":10},function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
} 
var detailDialog;
function showGoods(id){
	detailDialog = Kit.dialog("商品详情","${BASE_PATH}/bus/goods/store/goodDetailgb?id="+id,{closable:true,size:'size-wide'}).open();
}
function goodsOrdergb(id){
	window.location.href="${BASE_PATH}/bus/goods/store/goodsOrdergb?id="+id;
}
function onLogoSet(id,thumb){
	$("#item"+id+" a").replaceWith(template("thumbTpl",{"thumb":thumb}));
}
function doDelete(id){
	Kit.confirm("提示","您确定要删除这条数据吗？",function(){
		$.post("${BASE_PATH}/bus/goods/store/doDelete/"+id,function(result){
			if(result.flag==0){
				$("#item"+id).remove();
			}else{
				Kit.alert("删除失败");return;
			}
		});
	});
}
function tooDown(id){
	var message="你确定要降权此商品吗？";
	Kit.confirm("提示",message,function(){
		$.post("${BASE_PATH}/bus/goods/store/tooDown",{'id':id},function(result){
			if(result.flag==0){
				dataPaginator.loadPage(1);
			}else{
				Kit.alert("操作失败");return;
			}
			
		});
	});
}
$(document).ready(function() {
    $(".radioItem").change(function() {
    	 var $selectedvalue = $("input[name='state']:checked").val();
    		var goodId=$("#sGoodId").val();sStoreId = $("#sStoreId").val(),pstate = $("#sState").val(),
	    		//是否团购
	    		//是否赠送优惠
	    		//多支付方式	
    			sBeginDate = $("#sBeginDate").val(), sEndDate = $("#sEndDate").val(), xBeginDate = $("#xBeginDate").val(), xEndDate = $("#xEndDate").val();
    		var store;
    		if(sStoreId !=null && sStoreId !="" && sStoreId !=undefined){
    			store=sStoreId.join("','");
    		}
    		if(dataPaginator){
    			dataPaginator.destroy();
    		}
    		dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/bus/goods/store/xspagegb",{goodId:goodId,storeid:store,pstate:pstate,
    			//是否团购
    			//是否赠送优惠
    			//多支付方式	
    			sBeginDate:sBeginDate,sEndDate:sEndDate,xBeginDate:xBeginDate,xEndDate:xEndDate,date:$selectedvalue,"pageSize":10},function(result){
    			//设置显示最新的数据数量
    			$("#dataCount").html(result.object.totalRow);
    			//根据模板渲染数据并填充
    			$("#dataList").empty().append(template("dataTpl",result.object));
    		});
    });
});

 function doExcel(){
	 var $selectedvalue = $("input[name='state']:checked").val();
		if($selectedvalue==undefined){
			$selectedvalue =0;
		}
	 var goodId=$("#sGoodId").val();sStoreId = $("#sStoreId").val(),pstate = $("#sState").val(),
	 	sBeginDate = $("#sBeginDate").val(), sEndDate = $("#sEndDate").val(), xBeginDate = $("#xBeginDate").val(), xEndDate = $("#xEndDate").val();
		var store="";
	 if(sStoreId !=null && sStoreId !="" && sStoreId !=undefined){
			store=sStoreId.join("','");
		}
	 window.location.href="${BASE_PATH}/bus/goods/store/doExcel?goodId="+goodId+"&storeid="+store+"&pstate="+pstate+
			 "&sBeginDate="+sBeginDate+"&sEndDate="+sEndDate+"&xBeginDate="+xBeginDate+"&xEndDate="+xEndDate+"&date="+$selectedvalue;
	}
 
 $("#sBeginDate").datetimepicker({
	    format: 'yyyy-mm-dd hh:ii:ss',
	    minuteStep:1,
	    minView:'hour',
	    language: 'zh-CN',
	    pickerPosition:'bottom-left',
	    autoclose:true,
	}).on("click",function(){
		var d2=new Date();
		var d=$("#sEndDate").val();
		if(d==""){
			 $("#sBeginDate").datetimepicker("setEndDate",d2);
		}else{
			var d1=new Date(d); 
			d1.setDate(d1.getDate()-1);
			if(d1>d2){
		  	 	 $("#sBeginDate").datetimepicker("setEndDate",d2);
			}else{
				 $("#sBeginDate").datetimepicker("setEndDate",d1);
			}
		}
	});

	$("#sEndDate").datetimepicker({
	    format: 'yyyy-mm-dd hh:ii:ss',
	    minuteStep:1,
	    minView:'hour',
	    language: 'zh-CN',
	    autoclose:true,
		}).on("click",function(){
			var d=$("#sBeginDate").val();
			var d1=new Date(d); 
			d1.setDate(d1.getDate()+1); 
			$("#sEndDate").datetimepicker("setStartDate",d1);
		});
		
	 $(document).on("click","#sEndDate",function(){
	    	$('#sEndDate').datetimepicker('show');
	    });

	$(document).on("click","#sBeginDate",function(){
		$('#sBeginDate').datetimepicker('show');
	});

	$("#xBeginDate").datetimepicker({
	    format: 'yyyy-mm-dd hh:ii:ss',
	    minuteStep:1,
	    minView:'hour',
	    language: 'zh-CN',
	    pickerPosition:'bottom-left',
	    autoclose:true,
	}).on("click",function(){
		var d2=new Date();
		var d=$("#xEndDate").val();
		if(d==""){
			 $("#xBeginDate").datetimepicker("setEndDate",d2);
		}else{
			var d1=new Date(d); 
			d1.setDate(d1.getDate()-1);
			if(d1>d2){
		  	 	 $("#xBeginDate").datetimepicker("setEndDate",d2);
			}else{
				 $("#xBeginDate").datetimepicker("setEndDate",d1);
			}
		}
	});

	$("#xEndDate").datetimepicker({
	    format: 'yyyy-mm-dd hh:ii:ss',
	    minuteStep:1,
	    minView:'hour',
	    language: 'zh-CN',
	    autoclose:true,
		}).on("click",function(){
			var d=$("#xBeginDate").val();
			var d1=new Date(d); 
			d1.setDate(d1.getDate()+1); 
			$("#xEndDate").datetimepicker("setStartDate",d1);
		});
		
	 $(document).on("click","#xEndDate",function(){
	    	$('#xEndDate').datetimepicker('show');
	    });

	$(document).on("click","#xBeginDate",function(){
		$('#xBeginDate').datetimepicker('show');
	});
	function reset(){
		$("#sGoodId").val("");$("#sGoodName").val("");$("#sBeginDate").val("");$("#sEndDate").val("");$("#xBeginDate").val("");$("#xEndDate").val("");
		$("#sSellerId").val("");$("#sSellerId").trigger("change");  $("#sStoreId").val("");$("#sStoreId").trigger("change");  $("#sState").val("0");$("#sState").trigger("change");
		$("#sStoreId").selectpicker("refresh"); $("#sSellerId").selectpicker("refresh");
		$("#sType").val("0");$("#sType").selectpicker("refresh");
	}
	//按库存数量、订单量、（销售额）、收藏量）排序  单选图片点击切换
	var querySort=document.getElementsByClassName("querySort");//点击区域
	var down=document.getElementsByClassName("down");
	for(var i=0;i<querySort.length;i++){
		   //给每个class添加id标识(当索引)区分每个class
		   querySort[i].id=i;	   
		   //鼠标点击改变背景图片偏移
		   querySort[i].onclick=function(){
			   //当前索引
			   var index=this.id;
			   for( j=0;j<down.length;j++){
				   down[j].style.backgroundPosition="0px 61px";
			   }
			 //改变索引为当前的class背景图片偏移位置
			   down[index].style.backgroundPosition="0px 21px";
		   }
	}
	
	
	//点击收藏量数字打开收藏此商品的用户信息列表
	/* function countCon(id){
		location.href="${BASE_PATH}/bus/goods/store/countCon?goodsId="+id;
	} */
</script>
</body>
</html>